<%--suppress ALL --%>
<%--
  Created by IntelliJ IDEA.
  User: liuxi
  Date: 2018/6/6
  Time: 10:22
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"  %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/bootstrap/css/bootstrap.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/table/bootstrap-table.min.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/date/bootstrap-datetimepicker.min.css"/>
    <link rel="stylesheet" type="text/css"
          href="${pageContext.request.contextPath}/statics/sweetalert.css"/>
    <script type="text/javascript"
            src="${pageContext.request.contextPath}/statics/sweetalert.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/statics/jquery-3.2.1.min.js"></script>
    <script type="text/javascript"
            src="${pageContext.request.contextPath}/statics/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript"
            src="${pageContext.request.contextPath}/statics/table/bootstrap-table.min.js"></script>
    <script type="text/javascript"
            src="${pageContext.request.contextPath}/statics/table/locale/bootstrap-table-zh-CN.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/statics/date/Moment.js"></script>
    <script type="text/javascript"
            src="${pageContext.request.contextPath}/statics/date/bootstrap-datetimepicker.min.js"></script>
</head>
<body>
<form style="width: 500px;margin: 0 auto;margin-top: 50px" action="${pageContext.request.contextPath}/Nurse/add"
      enctype="multipart/form-data" method="post">
    <div class="form-group">
        <label for="nName">姓名:</label>
        <input type="text" class="form-control" id="nName" name="nName">
    </div>
    <div class="form-group">
        <label for="nCards">身份证:</label>
        <input type="text" class="form-control" id="nCards" name="nCards"><span style="color: red" id="cards"></span>
    </div>
    <div class="form-group">
        <label>性别:</label>
        <input type="radio" value="男" name="nSex"/>男
        <input type="radio" value="女" name="nSex"/>女
    </div>
    <div class="form-group">
        <label for="nCall">手机号:</label>
        <input type="text" class="form-control" id="nCall" name="nCall"><span style="color: red" id="phone"></span>
    </div>
    <div class="form-group" id="a">
        <label for="nEmail">邮箱:</label>
        <input type="text" class="form-control" id="nEmail" name="nEmail"><span style="color: red" id="email"></span>
    </div>
    <div class="form-group">
        <label for="posId">职位:</label>
        <select id="posId" class="form-control" name="posId">

        </select>
    </div>
    <div class="input-group input-daterange">
        <label for="cProposal">生日:</label>
        <input id="cProposal" name="cProposal" type="text" class="form-control">
    </div><br/>
    <div class="form-group">
        <label for="nSalary">工资:</label>
        <input type="text" class="form-control" id="nSalary" name="nSalary">
    </div>
    <div class="form-group">
        <label for="nImg">证件照:</label>
        <input type="file" id="nImg" name="file" onchange="PreviewImage(this)">
        <div id="myimg">
        </div>
    </div>
    <button type="button" class="btn btn-default">添加</button>
</form>
</body>
<script type="text/javascript">
    $("#nCall").change(function(){
        var myreg=/^[1][3,4,5,7,8][0-9]{9}$/;
        var cc = $("#nCall").val();
        if(myreg.test(cc)){
            $.ajax({
                "url":'${pageContext.request.contextPath}/Nurse/queryCall',
                "type":"post",
                "dataType":"json",
                "success":function (data) {
                    for(var i=0;i<data.length;i++){
                        if(data[i].nCall ==cc){
                            $("#phone").html("该手机号已被占用!");
                            $(".btn").attr("type","button");
                            return false;
                        }else{
                            $("#phone").empty();
                            $(".btn").attr("type","submit");
                        }
                    }
                }
            })
            return true;
        }else{
            $("#phone").html("请输入正确的手机号！");
            $(".btn").attr("type","button");
            return false;
        }
    })
    $("#nEmail").change(function(){
        var ePattern = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
        var email = $("#nEmail").val();
        if(ePattern.test(email)){
            $("#email").empty();
            $(".btn").attr("type","submit");
            return true;
        }else{
            $("#email").html("请输入正确的邮箱格式!");
            $(".btn").attr("type","button");
            return false;
        }
    })

    $("#nCards").change(function () {
        var cP = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
        var cards = $("#nCards").val();
        if(cP.test(cards)){
            $("#cards").empty();
            $(".btn").attr("type","submit");
        }else{
            $("#cards").html("请输入正确的身份证号!");
            $(".btn").attr("type","button");
            return false;
        }
    })










    function PreviewImage(imgFile) {
        var pattern = /(\.*.jpg$)|(\.*.png$)|(\.*.jpeg$)|(\.*.gif$)|(\.*.bmp$)/;
        if (!pattern.test(imgFile.value)) {
            alert("系统仅支持jpg/jpeg/png/gif/bmp格式的照片！");
            imgFile.focus();
        } else {
            var path;
            if (document.all)//IE
            {
                imgFile.select();
                path = document.selection.createRange().text;
            } else//FF
            {
                path = URL.createObjectURL(imgFile.files[0]);

            }
            document.getElementById("myimg").innerHTML = "<img src='" + path + "' style=\"width: 200px;height:200px\"' />";

        }
    };

    $(function () {





        // 时间插件
        $('#cProposal').datetimepicker({
            //viewMode: 'day',
            format: 'YYYY-MM-DD'
        });
        $("#cProposal").on("dp.change", function (e) {
            $('#cProposal').data("DateTimePicker").maxDate(e.date);
        });




        $.ajax({
            "url": '${pageContext.request.contextPath}/Nurse/queryPosition',
            "type": 'post',
            "dataType": "json",
            "success": function (data) {
                for (var i = 0; i < data.length; i++) {
                    $("#posId").append("<option value='" + data[i].posId + "'>" + data[i].posName + "</option>");
                }
            }
        })
    })
</script>
</html>
